<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/elementui.js"></script>
    <script src="js/common.js"></script>
</head>

<body>
    <div id="app">
        <el-container>
            <el-header>
                    <el-link type="primary" @click="logout">退出登录</el-link>
                    <span class="hy" style="color: #ff9db0;">当前登录用户：{{uname}}</span>
                <!-- <span class="custom-tree-node" slot-scope="{ node, data }">
                    <template slot-scope="scope">
                        <i :class="scope.row.imgicon"></i>
                    </template>
                </span> -->
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-tree :data="data" :props="defaultProps" default-expand-all="el-tree"
                        @node-click="handleNodeClick"></el-tree>
                </el-aside>
                <el-main>
                    <iframe :src="src" frameborder="0" style="width: 100%; height: 98%;"></iframe>
                </el-main>
            </el-container>
        </el-container>
    </div>
</body>
<style>
    .el-link,.hy {
        float: right;
        /* 字体大小 */
        font-size: 31px;
        margin-left: 20px;
    }

    body {
        margin: 0;
    }

    .el-header {
        /*上面*/
        border-bottom: 1px solid rgb(222, 222, 222);
        background-color: #409EFF;
        background: #ffd6ef
    }

    .el-aside {
        /*左边*/
        border: 1px solid pink;
        /* 绝对地位 */
        position: absolute;
        top: 60px;
        bottom: 0px;
    }

    .el-main {
        /*右边*/
        border: 1px solid black;
        position: absolute;
        right: 0px;
        left: 200px;
        bottom: 0px;
        top: 60px;
        padding: 0px;
    }
</style>
<script>
    new Vue({
        el: '#app',
        data: {
            src: "",
            data: [{
                label: '一级 1',
                children: [{
                    label: '二级 1-1',
                }]
            }],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            uname:""
        },
        methods: {
            handleNodeClick(data) {
                this.src = data.href
                console.log(data);
            },
            initTreeData() {
                axios.get(API + 'selectusermenu').then(res => {
                    this.uname=res.data.data.user.uname;
                    this.data = arrayToTree(res.data.data.menus);
                })
            },
            logout() {
                this.$confirm('此操作将退出登录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    window.localStorage.removeItem("token")
                    location.href = "login.html"
                }).catch(() => {
                    this.$message({
                    })
                })
            }
        },
        mounted() {//vue生命周期函数，挂载完毕之后执行
            this.initTreeData()
        }
    })
</script>

</html>